@charset "utf-8";
@import "@arco-design/web-vue/dist/arco.css";
@import '@fancyapps/ui/dist/fancybox/fancybox.css';

:root {
    --custom-main-hue: 359deg;
    --custom-main-sat: 83%;
    --custom-main-lig: 62%;
    --custom-subs-hue: 17deg;
    --custom-subs-sat: 95%;
    --custom-subs-lig: 70%;
    --main-color: var(--custom-main-hue) var(--custom-main-sat) var(--custom-main-lig);
    --subs-color: var(--custom-subs-hue) var(--custom-subs-sat) var(--custom-subs-lig);
    /* 色调 */
    --color-rgb: 238 77 80;
    --color-sub-rgb: 251 145 104;
    --color: rgb(var(--color-rgb));
    --color-sub: rgb(var(--color-sub-rgb));

    /* 字块 */
    --font-color: 0deg 0% 15%;
    --font-alpha: 100%;
    --font-weight-normal: 400;
    --font-weight-title: 600;
    --font-size-normal: .6rem;
    --font-size-small: .5rem;
    --font-size-medium: .55rem;
    --font-size-title: .65rem;
    --font-spacing: .01em;
    --font-family: PingFang SC, -apple-system, Century Gothic, Microsoft YaHei Light, system-ui, sans-serif;
    --font-family-title: var(--font-family);
    --font-family-slogn: SmileySans, var(--font-family);
    --font-family-code: Monaco, Consolas, monospace;
    --text-shadow: 0 .04rem .2rem rgb(0 0 0 / 30%);

    /* 区块 */
    --radius: .5rem;
    --icon-size: .85rem;
    --card-size: 15rem;
    --narrow-size: 1920px;
    --medium-size: 1152px;
    --content-size: 1000px;
    --scroll-mask: linear-gradient(#0000, #000 var(--gap-divs), #000 calc(100% - var(--gap-divs)), #0000);
    --box-shadow: 0 .2rem 1rem 0 hsl(var(--font-color) / 10%);
    --box-shadow-white: 0 .2rem 1rem 0 hsl(var(--font-color) / 3%);
    --box-shadow-color: var(--box-shadow), 0 2rem 2rem -2rem rgb(var(--color-rgb) / 30%);
    --bg: hsl(0deg 0% 0% / 5%);
    --h-bg: hsl(0deg 0% 99%);
    --w-bg: white;
    --n-bg: transparent;

    /* 距离 */
    --nav-height: 3rem;
    --sticky-top: 3rem;
    --edge-lr: 2rem;
    --edge-tb: 3rem;
    --gap-area: 2rem;
    --gap-divs: 1rem;
    --gap-span: .5rem;

    /* 动画 */
    --animation-on: cubic-bezier(.6, .1, 0, 1);
    --animation-in: cubic-bezier(.6, .2, .25, 1);
    --animation-ot: opacity .5s var(--animation-in) backwards, transform 1s var(--animation-in) backwards;
    --animation: opacity .5s var(--animation-in) backwards, transform 1s var(--animation-in) backwards, filter .7s var(--animation-in) backwards;
}

:root body {
    --border: .05rem solid hsl(var(--font-color) / 10%);
    --s-color: hsl(var(--font-color) / var(--font-alpha));
    --f-color: white;
    --s-shadow: none;
}

@media (max-width: 1152px) {
    :root {
        --edge-lr: 1rem;
    }
}

@media (max-width: 641px) {
    :root {
        --sticky-top: 1rem;
    }
}

/* 弱化动画模式 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after, *:active {
        animation-duration: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0ms !important;
        scroll-behavior: auto !important;
    }
}

/* 夜间模式 */
:root[theme="dark"] {
    --font-color: 214deg 15% 70%;
    --bg: hsl(0deg 0% 100% / 4%);
    --h-bg: hsl(214deg 64% 6%);
    --w-bg: hsl(214deg 64% 10%);
    --s-bg: hsl(0deg 0% 100% / 4%);
}

:root[theme="dark"] body {
    --f-color: var(--h-bg);
}

:root[theme="dark"] img {
    filter: blur(0) brightness(.7);
}

/* 附加属性 */
:root body.nav-fixed {
    --nav-height: 2.5rem;
}

:root body:where(.single, .featured-image):not(.nav-fixed) {
    --s-color: hsl(0deg 0% 100% / 75%);
    --f-color: hsl(0deg 0% 0% / 75%);
    --s-shadow: var(--text-shadow);
}

:root body:where(.single-format-gallery, .single-format-audio, .single-format-video, .page-template-page-board) {
    --font-color: 0deg 0% 100%;
    --font-alpha: 75%;
    --bg: rgba(255 255 255 / .05);
    --s-bg: rgba(255 255 255 / .05);
    --w-bg: rgba(255 255 255 / .05);
    --s-box-shadow: var(--box-shadow-white);
    --h-bg: #000;
    --f-color: var(--h-bg);
    --s-shadow: var(--text-shadow);
    text-shadow: var(--text-shadow);
    background: var(--h-bg);
}
:root body:where(.page-template-page-about){
    --font-color: 0deg 0% 100%;
    --font-alpha: 75%;
    --bg: rgb(255 255 255 / .05);
    --s-bg: rgb(255 255 255 / .1);
    --w-bg: rgb(255 255 255 / .1);
    --s-box-shadow: var(--box-shadow-white);
    --h-bg: #000;
    --layout-bg: none;
    --f-color: var(--h-bg);
    --s-color: hsl(0deg 0% 100% / 75%);
}
/* =Reset
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

*, *::before, *::after {
    box-sizing: border-box;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--font-color) / 10%) #0000;
}

html {
    font-size: x-large;
    height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--sticky-top);
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    height: 100%;
    background: var(--h-bg);
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

body.home {
    --hue: 359deg;
    --satura: 77%;
    --light: 90%;
    --sun-size: 60vmin;
    --new-size: 11rem;
    --title-color: hsl(var(--hue) var(--satura) 77%);
    --star-color: hsl(var(--hue) var(--satura) 95%);
    --star-shadow-out: hsl(var(--hue) 77% var(--light) / 70%);
    --star-shadow-in: hsl(var(--hue) var(--satura) var(--light) / 70%);
    --sun-color: hsl(var(--hue) var(--satura) var(--light) / 100%);
    --flow-color: hsl(var(--hue) 70% var(--light) / 100%);
    --title-shadow: 0 0 1rem var(--star-shadow-in);
    --animation: transform 1.25s cubic-bezier(.6, .2, .25, 1) backwards, opacity 1s cubic-bezier(.6, .2, .25, 1) backwards
}

[theme=dark] body.home {
    --hue: 214deg;
    --light: 30%
}

body.error404 {
    animation: change-background 3s infinite linear;
}
body.gallery .site-main{
    overflow: hidden;
}
body.error404 .site-main {
    text-align: center;
}
:root body.season {
    --hue: 11deg;
    --title-color: hsl(11deg 65% 80%);
}
body.page-template-page-about {
    --banner-height: 100vh;
    --content-top: 6vh;
    --animation-in: cubic-bezier(.6, .2, .25, 1);
    --animation-on: cubic-bezier(.6, .1, 0, 1);
}

body.user-profile {
    --fqxk-x: 1rem;
    --fqxk-y: 1rem;
}

body.user-profile .fqxk-card-icon-img {
    border-radius: 50%;
}
.index-one::before {
    content: "";
    height: 110%;
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(.95);
    pointer-events: none;
    transition: .5s;
    -webkit-mask: linear-gradient(#000 90%, #0000);
}
.index-one::before {
    --opacity: 1;
    background: url(@/assets/theme/home/summer.png) 50% / cover;
}
.season .sun-area {
    scale: 5;
    opacity: 0;
    visibility: hidden;
    animation: none;
}
.season.nav-fixed .index-one::before,.index-one::before {
    position: fixed;
    visibility: hidden;
    opacity: 0;
}
.season .index-one::before {
    opacity: var(--opacity, 1);
    transform: none;
    visibility: visible;
}
.season .sun-area {
    scale: 5;
    opacity: 0;
    visibility: hidden;
    animation: none;
}
@media (min-width: 1153px) {
    .season .sun-area *{
        animation-play-state: paused !important;
    }
}
@keyframes change-background {
    0%, 59%, 98%, 100% {
        background: #fffada;
    }
    61%, 97% {
        background: #ffffff;
    }
}

article, aside, details, figcaption, figure, footer, header, nav, section {
    display: block;
}

:where(.entry-content, .widget_text) :is(ul, ol, li > ul, li > ol, li li) {
    margin-left: 1.25em;
}

table {
    border-collapse: collapse;
    width: 100%;
}

caption, th, td {
    font-weight: normal;
    text-align: left;
}

td {
    padding: .5em;
}

blockquote, q {
    quotes: "" "";
    hyphens: none;
}

blockquote::before, q::before {
    content: "\e65d";
    font-family: 'iconfont';
    font-size: 1rem;
    opacity: .6;
    margin: -1rem 0;
    display: block;
}

a > img {
    border: 0;
    vertical-align: middle;
}

/* =Global
----------------------------------------------- */
body, button, input, select, textarea {
    color: hsl(var(--font-color) / var(--font-alpha));
    font: var(--font-weight-normal) var(--font-size-normal)/2 var(--font-family);
}

/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-title);
    font-weight: var(--font-weight-title);
    letter-spacing: var(--font-spacing);
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1rem;
}

h4 {
    font-size: .875rem;
}

h5 {
    font-size: .75rem;
}

h6 {
    font-size: .65rem;
}

hr {
    background-color: hsl(var(--font-color) / 10%);
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

/* 链接样式 */
a {
    color: hsl(var(--font-color) / var(--font-alpha));
    outline: 0;
    text-decoration: none;
    transition: .7s;
}

a:where(:hover, :focus, :active) {
    color: var(--color);
}

:where(.site-header, .site-footer, .site-main, .widget-area, .header-area, .comments-area) a:not([role="button"]) {
    transition: .7s;
    cursor: pointer;
    background: linear-gradient(90deg, rgb(var(--color-rgb) / 50%), rgb(var(--color-sub-rgb) / 50%)) no-repeat left 100% / 0 1px;
}

:where(.current-cat) > a,
:where(.site-header, .site-footer, .site-main, .widget-area, .header-area, .comments-area) a:not([role="button"]):hover {
    background-size: 100% 1px;
    color: rgb(var(--color-rgb) / 80%);
}

/* 文字段落 */
ol, ul, li {
    list-style: none;
}
p, pre, address, blockquote {
    margin: 1.5em 0;
}

address, dfn, cite, em, i {
    font-style: normal;
}

th, b, strong {
    font-weight: bold;
}

pre, code, kbd, tt, var {
    font: var(--font-weight-normal) var(--font-size-medium)/2 var(--font-family-code);
    hyphens: none;
}

code {
    border: 1px solid hsl(var(--font-color) / .2);
    background: hsl(var(--font-color) / .05);
    border-radius: .5em;
    display: inline-block;
    padding: 0 .5em;
    vertical-align: middle;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

ul, ol {
    margin: 1em 0 1em 1.25em;
}

li > ul,
li > ol {
    margin-left: 1.5em;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0 1.5em 1.5em;
}

blockquote p {
    border-left: var(--border);
    padding: 0 0 0 1rem;
}

blockquote cite {
    font-size: var(--font-size-small);
    display: block;
    margin: -1em 0 0;
    color: hsl(var(--font-color) / .5);
}

blockquote cite::before {
    content: "\2014\2014 \0020";
    color: hsl(var(--font-color) / .1);
}

pre {
    background: var(--s-bg, #eee);
    padding: .7rem 1rem;
    max-width: 100%;
    border-radius: var(--radius);
    word-break: break-all;
    overflow-wrap: anywhere;
}

pre code {
    margin: -.7rem -1rem;
    padding: 1.7rem 1rem .7rem;
    color: #abb2bf;
    box-shadow: var(--box-shadow);
    border-radius: var(--radius);
    tab-size: 4;
    background: radial-gradient(circle, #ed6c60 50%, #dc3c36 55%, #0000 65%) no-repeat 1rem .7rem / .5rem .5rem,
    radial-gradient(circle, #f7c151 50%, #da9721 55%, #0000 65%) no-repeat 1.7rem .7rem / .5rem .5rem,
    radial-gradient(circle, #64c856 50%, #1ba125 55%, #0000 65%) no-repeat 2.4rem .7rem / .5rem .5rem var(--s-bg, #282c34);
}

pre code {
    display: block;
    font-family: inherit;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.entry-content table {
    max-width: calc(100vw - var(--edge-lr) * 2);
    white-space: pre;
    font-size: .5rem;
    border-radius: var(--radius);
    background: var(--bg);
    overflow: auto;
    width: 100%;
    border-collapse: inherit;
    border-spacing: 0;
}

.entry-content thead {
    border-bottom: 0;
}

.entry-content th {
    position: sticky;
    z-index: 2;
    border: none;
    padding: 1em;
    line-height: 2;
    font-weight: bold;
}

.entry-content tbody tr:nth-child(odd) {
    background-color: var(--bg);
}

.entry-content td {
    border: var(--border);
    padding: 1em;
    line-height: 2;
    border-color: #0000;
}

kbd {
    font: inherit;
    color: rgb(var(--color-sub-rgb) / 70%);
    margin: 0 .2em;
}

abbr, acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark, ins {
    background: #fff9c0;
    text-decoration: none;
}

sup, sub {
    height: 0;
    line-height: 0;
    position: relative;
    display: inline-block;
    color: rgb(var(--color-sub-rgb) / 70%);
    font-size: .5rem;
    vertical-align: baseline;
}

sup {
    bottom: 1ex;
}

sub {
    top: .5ex;
}

small {
    font-size: 75%;
}

big {
    font-size: 125%;
}

time {
    flex: none;
    font-variant: lining-nums;
    display: inline-block;
}

figure {
    margin: 1.5em 0;
}

figcaption {
    font-size: var(--font-size-small) !important;
    color: hsl(var(--font-color) / .5) !important;
    line-height: 2;
    margin: 1em 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

img {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
}

img.loaded {
    animation: opacity 1s;
}

/* 浏览器部件 */
.button, button, .submit, input, select, textarea {
    border: 0;
    margin: 0;
    vertical-align: middle;
    outline: none !important;
    width: 100%;
    accent-color: rgb(var(--color-rgb) / .8);
    background: var(--bg);
    box-shadow: var(--s-box-shadow);
    border-radius: var(--radius);
    -webkit-appearance: none;
    padding: .5em 1em;
    line-height: inherit;
    transition: .5s;
}

select, [type="radio"] {
    cursor: pointer;
}

option {
    background: var(--h-bg);
}

.button, .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    width: auto;
    line-height: 1;
    padding: 1em;
    gap: .5em;
    flex: auto;
}

.submit, .button.has-thyuu-color {
    color: #fff;
    background: linear-gradient(135deg, var(--bg) 20%, rgb(var(--color-rgb) / .8) 30%, rgb(var(--color-sub-rgb) / .8) 70%, var(--bg) 80%) 50% / 300% 100%;
    box-shadow: 0 0 1rem 0 rgb(var(--color-rgb) / .2), 0 0.5rem 1rem -0.5rem rgb(var(--color-rgb) / .5);
}

input[type="radio"]:checked {
    background: linear-gradient(135deg, rgb(var(--color-rgb) / .8), rgb(var(--color-sub-rgb) / .8));
}

.color-btn, :is(.nav-previous, .nav-next) a, input:where([type="button"], [type="reset"], [type="submit"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    width: auto;
    min-width: var(--button-size, auto);
    min-height: var(--button-size, auto);
    line-height: 1;
    padding: calc(var(--button-size, 4em) / 4);
    background: linear-gradient(135deg, rgb(var(--color-rgb) / .8), rgb(var(--color-sub-rgb) / .8));
    box-shadow: 0 0 1rem 0 rgb(var(--color-rgb) / .2), 0 0.5rem 1rem -0.5rem rgb(var(--color-rgb) / .5);
    border-radius: calc(var(--button-size, var(--radius) + var(--radius)) / 2);
}

.color-btn,
:is(.nav-previous, .nav-next) a,
:is(.nav-previous, .nav-next) a:hover {
    --button-size: 1.5rem;
    gap: .5em;
    color: #fff;
    background: linear-gradient(135deg, rgb(var(--color-rgb) / .8), rgb(var(--color-sub-rgb) / .8));
    overflow: hidden;
}

.has-btn-effect.button::after,
.navigation a::after,
.navigation a::before {
    line-height: 1;
    font-weight: 400;
    font-family: "iconfont";
}

.navigation .nav-previous a::before {
    content: "\e623";
}

.has-btn-effect.button::after,
.navigation .nav-next a::after {
    content: "\e627";
}

.has-btn-effect.button,
.has-btn-effect.navigation a {
    font-size: .5rem;
    border-radius: 2em;
}

.has-btn-effect .btn-meta {
    opacity: 0;
    max-width: 0;
    height: 1em;
    margin: 0 -.5em 0 0;
    overflow: hidden;
    transition: .7s;
}

:is(.has-btn-effect.button, .has-btn-effect.navigation a):hover .btn-meta {
    opacity: 1;
    max-width: 10em;
    margin: 0;
}

select {
    background: var(--bg) url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ccc' stroke-width='2' d='m5 9 7 7 7-7' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / .75rem content-box border-box;
}

select:hover {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ee4d50' stroke-width='2' d='m5 9 7 7 7-7' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

option {
    background: var(--h-bg);
}

::selection {
    background: rgb(var(--color-rgb) / 50%);
    color: #FFF;
}

::-moz-selection {
    background: rgb(var(--color-rgb) / 50%);
    color: #FFF;
}

::-moz-placeholder {
    opacity: 1;
}

::-webkit-input-placeholder {
    color: var(--font-color);
}

/* 滚动条 */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-thumb {
    border: 5px solid #0000;
    border-radius: var(--radius);
    background: hsl(var(--font-color) / 10%) content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-rgb) / 50%) content-box;
}

::-webkit-scrollbar-corner, ::-webkit-scrollbar-track {
    background: #0000;
}

.mask-scroll {
    white-space: nowrap;
    overflow: scroll;
    gap: var(--gap-area);
    margin: 0 calc(var(--edge-lr) * -1);
    padding: 0 var(--edge-lr);
    -webkit-mask: linear-gradient(90deg, #00000000, #000) no-repeat 0 0 / var(--edge-lr) 100%, linear-gradient(90deg, #000, #000) no-repeat center / calc(100% - var(--edge-lr) * 2) 100%, linear-gradient(90deg, #000, #00000000) no-repeat 100% center / var(--edge-lr) 100%;
    display: flex;
    flex-direction: row;
}

.mask-scroll::-webkit-scrollbar, .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.mask-scroll, .no-scrollbar {
    scrollbar-width: none;
}

/* 通用属性 */
.hidden {
    display: none;
}

.fade-before {
    --trfm: scale(.98) translateY(1rem);
    opacity: 0;
    transform: var(--trfm, translateY(1rem));
    transform-origin: var(--trfm-or, top);
    transition: transform cubic-bezier(.6, .2, .25, 1) .7s, opacity .3s;
}

.fade-after {
    opacity: 1;
    transform: var(--trfm-in, none);
}
.dialog-check {
    all: unset;
    position: fixed;
    background: rgb(0 0 0 / .15);
    inset: 0;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    transition: .7s;
}
.dialog-check:checked {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
}
.single-format-gallery .comment-list .depth-1,
.aside-author .text,
.blur {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.single :is(.entry-meta .navigation a, .entry-meta-left > *),
.blur-saturate {
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
}

button:active, input:active, textarea:active, .more-link:active, .comment-form-button:active, .emoji-btn:active,
:is(.taxonomy-sub, .menu, .comment-content, .navigation, .post-navigation) a:active {
    scale: .98;
}

/* font */
@font-face {
    font-family: "SmileySans";
    src: url(../fonts/SmileySans.woff2);
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

i {
    font-style: normal;
}

pvideo {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    box-shadow: var(--box-shadow);
    border-radius: var(--radius);
    overflow: hidden;
}

pvideo iframe {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
}

/* =Site area
 =====================================*/
.header-area, .content-area, .site-header, .site-footer {
    padding-inline: var(--edge-lr);
    margin-inline: auto;
}

body:not(.single) .content-area {
    margin-block: calc(var(--edge-tb) + var(--gap-divs)) var(--gap-area);
}

.header-area {
    position: fixed;
    display: flex;
    inset: 0 0 auto;
    height: var(--nav-height);
    z-index: 30;
    gap: var(--gap-divs);
    align-items: center;
    justify-content: space-between;
    transition: .5s;
}

.site-header {
    position: relative;
    height: calc(100% - 7rem);
    margin: var(--edge-tb) var(--edge-lr) calc(-1 * var(--edge-tb));
    border-radius: var(--radius);
    box-shadow: var(--box-shadow-white);
    overflow: hidden;
}

.site-branding {
    color: rgb(255 255 255 / 60%);
    text-shadow: var(--text-shadow);
    font-size: 1rem;
    bottom: 1rem;
    right: var(--edge-lr);
    padding: .5rem 1rem;
    position: absolute;
}

.site-main {
    display: grid;
    gap: var(--gap-divs);
}

/*menu
==========================================*/
/* 标识 */
.logo {
    font-size: 1rem;
    width: 1.5em;
    height: 1em;
    position: relative;
    border-radius: 20% / 30%;
    overflow: hidden;
}

.logo::before, .logo::after {
    content: '';
    top: 50%;
    display: block;
    transform: translateY(-50%);
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: absolute;
    background-image: linear-gradient(135deg, #0000, rgb(var(--color-rgb) / .7) 25%);
    z-index: 2;
    background-size: 400%;
    background-position: 50%;
}

.logo:hover::before {
    animation: bg-logo 4.5s ease 1, logo-left 9s ease 1;
}

.logo:hover::after {
    animation: bg-logo 4.5s ease 1, logo-right 9s ease 1;
}

.logo.color::before, .logo::before {
    left: -.1em;
    z-index: 2;
}

.logo.color::after, .logo::after {
    right: -.1em;
    background-image: linear-gradient(135deg, rgb(var(--color-sub-rgb) / .3) 75%, #0000);
}

/* 标识 - 反白稿 */
.logo.white, body.single:not(.nav-fixed) .site-logo .logo {
    --color-rgb: 255 255 255;
    --color-sub-rgb: 255 255 255;
}

.menu-out .menu {
    display: flex;
    margin: 0;
}

.menu-out .menu a {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: none !important;
}

.menu-out .menu > li > ul a::before,
.menu-out .menu > li > ul a::after {
    font: var(--icon-size)/1 'iconfont';
    width: 1em;
}

:where(.menu-out .menu) > li > a {
    color: var(--s-color);
    line-height: calc(var(--nav-height) + 1rem);
    font-weight: var(--font-weight-title);
}
.menu-out .menu > li > ul > li > a {
    font-weight: var(--font-weight-title);
}

.menu-out .menu:hover > li > a {
    color: hsl(var(--font-color) / .5);
    text-shadow: none;
}

.menu-out .menu:hover > li:hover > a {
    color: var(--color);
}

.menu-out .menu > li > ul > li > a::before {
    content: "\e64f";
}

.menu-out .menu .menu-word > a::before {
    content: "\e693";
}

.menu-out .menu .menu-says > a::before {
    content: "\e620";
}

.menu-out .menu .menu-photo > a::before {
    content: "\e694";
}

.menu-out .menu .menu-board > a::before {
    content: "\e630";
}

.menu-out .menu .menu-friends > a::before {
    content: "\e632";
}

.menu-out .menu .menu-people > a::before {
    content: "\e66c";
}

.menu-out .menu .menu-film > a::before {
    content: "\e8af";
}

.menu-out .menu .menu-music > a::before {
    content: "\e63b";
}

.menu-out .menu .menu-archive > a::before {
    content: "\e666";
}

.menu-out .menu .menu-info > a::before {
    content: "\e655";
}

.menu-out .menu .menu-think > a::before {
    content: "\e640";
}

.menu-out .menu .menu-auth > a::before {
    content: "\e615";
}

.menu-out .menu a[target="_blank"]:after,
.menu-out .menu ul .menu-item-has-children > a::after,
.menu-out .menu > li > ul > li .menu-item-object-post_tag > a::before {
    content: "\e627";
    text-align: center;
    opacity: .3;
    transition: .5s;
    font-size: var(--font-size-small);
}

.menu-out .menu a[target="_blank"]:after {
    content: "\e667";
    width: auto;
}

.menu-out .menu-item-has-children > a::after {
    width: auto !important;
}

.menu-out .menu-item-has-children:hover > a::after {
    transform: rotate(90deg);
}

.menu-out .menu-item-has-children:hover > a:hover::after {
    transform: none;
}

.menu-out .menu > li > ul > li .menu-item-object-post_tag > a::before {
    content: "\e659";
}

.menu-out .menu li {
    position: relative;
    padding: .5rem;
    outline: thin solid #0000;
    border-radius: var(--radius);
    transition: .3s;
}
.menu-out .menu > li:before {
    content: "";
    position: fixed;
    background: #000;
    inset: 0;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    transition: .5s cubic-bezier(.6, .1, 0, 1);
}

#menu-open:checked ~ .menu-out .menu > li > ul > *,
.menu-out .menu > li:hover > ul > * {
    --trfm: translateX(1rem);
    --filter: blur(10px);
    animation: var(--animation);
    animation-duration: .5s;
}

/*.menu-out .menu li ul {*/
/*    margin: 0;*/
/*    padding: .5rem;*/
/*    white-space: nowrap;*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    align-items: flex-start;*/
/*    gap: .5rem;*/
/*    z-index: 2;*/
/*    transition: .3s;*/
/*}*/

.menu-out .menu > li > ul {
    position: fixed;
    width: min(var(--card-size), 100%);
    max-height: calc(100vh - var(--edge-tb) - 1rem);
    padding: .5rem;
    margin: 0 0 0 -1.75rem;
    top: var(--edge-tb);
    border: var(--border);
    border-radius: var(--radius);
    background: var(--s-bg, hsl(0 0% 100% / .8));
    -webkit-backdrop-filter: saturate(1.8) blur(10px);
    backdrop-filter: saturate(1.8) blur(10px);
    box-shadow: var(--box-shadow-white);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-1rem);
    transform-origin: top left;
    overflow: clip auto;
    transition: .5s cubic-bezier(.6, .1, 0, 1);
}

.menu-out .menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    will-change: transform;
}

.menu-out .menu li ul > li ul {
    display: grid;
    grid: auto / repeat(auto-fill, minmax(min(10em, 100%), 1fr));
    margin: .5rem -.5rem -.5rem;
    font-size: var(--font-size-medium);
}

.menu-out .menu > li > ul li:hover {
    background: var(--s-bg, rgb(0 0 0 / 2%));
}

.post-menu {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    background: none;
    transition: .3s;
}

/* =Content list
----------------------------------------------- */
.post_box {
    display: grid;
    grid: auto-flow minmax(var(--card-size), max-content) / repeat(auto-fill, minmax(min(var(--card-size), 100%), 1fr));
    align-content: center;
    gap: var(--gap-divs);
}

.post-time,
.post-meta {
    --font-alpha: 60%;
    display: flex;
    font-size: var(--font-size-small);
    gap: var(--gap-span);
    color: hsl(var(--font-color) / .6);
}

.post-mark {
    display: inline-flex;
    justify-content: space-between;
    gap: 1em;
}

.entry-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: var(--w-bg);
    box-shadow: var(--box-shadow-white);
    transition: .5s;
}

.entry-preview:hover {
    box-shadow: var(--box-shadow-color);
}

.entry-preview .post-mark {
    width: 100%;
}

.entry-preview .post-mark > * {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.entry-preview .post-mark .tag {
    flex: none;
}

.entry-preview .post-mark .tag-list {
    flex: auto;
    text-align: right;
}

.tag-list a {
    margin: 0 .5em 0 0;
}

.more-link, #infinite-handle span {
    line-height: 1;
    display: block;
    font-size: 1rem;
    font-weight: 100;
    background: none !important;
}

.entry-thyuupost {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: auto;
    padding: var(--gap-divs);
    gap: 1em;
    border-radius: var(--radius);
    z-index: 2;
    transition: .5s;
}

.thumbnail_box {
    position: relative;
    width: 100%;
    flex: 0 0 var(--card-size);
}

.thumbnail {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    transform: rotate(0deg);
    background: rgb(0 0 0 / 50%) !important;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: .5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.entry-preview:hover .thumbnail img {
    transform: scale(1) translate3d(0, 0, 0);
    filter: blur(10px) brightness(.8);
}

.thumbnail::before,
.thumbnail::after {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'iconfont';
    position: absolute;
    overflow: hidden;
    text-shadow: 0 1px 5px rgb(0 0 0 / 30%);
}

.thumbnail::before {
    content: "\ec2a";
    color: #ffffff80;
    font-size: 2rem;
}

.thumbnail::after {
    content: "\e627";
    width: 70%;
    border: 1px solid rgba(255, 255, 255, .75);
    opacity: 0;
    height: 70%;
    transition: .5s;
    z-index: 2;
    color: white;
    border-radius: var(--radius);
    font-size: 1rem;
}

.entry-preview:hover .thumbnail::after {
    width: 100%;
    height: 100%;
    opacity: 1;
}

/* 特殊 */
body:not(.category) :is(.format-quote,.format-image) .thumbnail_box {
    position: absolute;
    height: 100%;
}

body:not(.category) :is(.format-quote,.format-image) .entry-thyuupost * {
    color: white;
}

body:not(.category) :is(.format-quote,.format-image) .entry-thyuupost {
    background: linear-gradient(0deg, rgb(0 0 0 / 50%), #00000000);
    flex: none;
    margin: auto 0 0;
}

/* =Archives
----------------------------------------------- */
.page-header {
    display: grid;
    position: relative;
}

.page-header .fade-before {
    --trfm: translateX(1rem);
}

.page-title {
    color: rgb(var(--color-rgb) / .7);
    font-family: var(--font-family-slogn);
    font-weight: 400;
    line-height: 1.5;
}

body:not(.search) .page-title::after {
    --height: .25em;
    content: "";
    display: inline-block;
    width: calc(var(--height) * 3);
    height: var(--height);
    margin: 0 0 calc(var(--height) * -1) calc(var(--height) * .5);
    opacity: 0;
    border-radius: var(--height);
    background: linear-gradient(90deg, rgb(var(--color-rgb) / 20%), #0000) no-repeat 0 50% / 100% 100%, radial-gradient(circle, rgb(var(--color-rgb) / 70%) 45%, #0000 50%) no-repeat 0 50% / var(--height) var(--height);
    transform: rotate(0) scale(2);
    transform-origin: left;
    transition: .5s ease-in .7s;
}

body:not(.search) .page-title.fade-after::after {
    opacity: 1;
    transform: rotate(-45deg);
}

body:not(.search) .page-title:hover::after {
    transform: rotate(-30deg) scale(1.2);
    transition: .5s;
}

.page-title::before {
    font-family: 'iconfont';
    font-weight: 400;
    margin: 0 .5em 0 0;
}

.tag .page-title::before {
    content: "\e634";
}

.search .page-title::before {
    content: "\e6aa";
    margin: 0 .5em 0 0;
}

.date .page-title::before {
    content: "\e65f";
}

.author .page-title::before {
    content: "\e615";
}

.edit-link a::before, .post-mark .tag a::before, .tag-list a::before, .entry-date time::before {
    font-family: 'iconfont';
    margin: 0 .25em 0 0;
}

.entry-date time::before {
    content: "\e65f";
}

.post-mark .tag a::before {
    content: "\e634";
}

.tag-list a::before {
    content: "\e659";
    margin: 0;
}

.edit-link a::before {
    content: "\e699";
}

.edit-link {
    float: right;
}

.post_content .edit-link {
    float: none;
}

.taxonomy-des {
    max-width: 90%;
}

.taxonomy-sub {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    overflow: auto hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    position: relative;
    margin: calc(var(--gap-divs) * -1);
    padding: var(--gap-divs);
    gap: var(--gap-span);
    -webkit-mask: linear-gradient(90deg, #00000000, #000) no-repeat 0 0 / calc(var(--gap-divs) * 1) 100%,
    linear-gradient(90deg, #000, #000) no-repeat center / calc(100% - var(--gap-divs) * 2) 100%,
    linear-gradient(90deg, #000, #00000000) no-repeat 100% center / calc(var(--gap-divs) * 1) 100%;
}

.taxonomy-sub li {
    position: relative;
    flex: none;
}

.taxonomy-num {
    font-size: var(--font-size-small);
    opacity: .4;
}

/* =Single
----------------------------------------------- */
:where(.hentry, .widget_text, .comment-content) ul {
    list-style: disc;
}

:where(.hentry, .widget_text, .comment-content) ol {
    list-style: decimal;
}

.entry-content {
    width: min(var(--content-size, 60rem), 100%);
    font-size: .7rem;
    margin-inline: auto;
    letter-spacing: .01em;
    line-height: 2.5;
    text-align: justify;
    word-break: break-all;
    overflow-wrap: anywhere;
    counter-reset: section;
}

.entry-content > *:where(h1, h2, h3, h4, h5, h6) {
    margin-bottom: .5em;
}

.entry-content a[target="_blank"] {
    color: rgb(var(--color-rgb) / .7);
    line-height: 1;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: linear-gradient(90deg, rgb(var(--color-rgb) / .7) 50%, rgb(var(--color-sub-rgb) / .1) 50%) no-repeat 100% 100% / 201% 100%;
    border-radius: 2em;
    font-size: .8em;
    padding: .5em;
}

.entry-content a[target="_blank"]:hover {
    color: white;
    background-position: 0;
}

.entry-content a[target="_blank"]:before {
    content: "\e667";
    font-family: 'iconfont';
    padding: .5em;
    margin: 0 .5em 0 -.5em;
    background: rgb(var(--color-rgb) / .5);
    border-radius: 50%;
    color: white;
}

.single .content-area {
    position: relative;
    padding-block: 0 calc(var(--edge-lr) + var(--radius));
    z-index: 2;
    animation: var(--animation);
    animation-delay: .7s;
    margin-bottom: calc(-1 * var(--radius));
}

.single:not(.single-format-gallery, .single-format-audio, .single-format-video) .content-area {
    background: var(--h-bg);
    border-radius: var(--radius) var(--radius) 0 0;
    padding-top: var(--edge-lr);
}

.single .site-main {
    gap: var(--gap-area);
}

.single .site-header {
    --font-color: 0deg 0% 100%;
    --font-alpha: 90%;
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: hsl(var(--font-color) / var(--font-alpha));
    text-shadow: var(--text-shadow);
    text-align: center;
    align-items: center;
    height: 90vh;
    margin: 0;
    padding-block: var(--top, var(--gap-divs)) var(--gap-divs);
    gap: var(--gap-area);
}

.single .entry-header {
    width: 100%;
    height: 100%;
    position: fixed;
    background: black;
    inset: 0;
}

.single .entry-header::after {
    content: "";
    background: linear-gradient(0deg, rgb(0 0 0 / .5), rgb(0 0 0 / 0) 50%);
    position: absolute;
    inset: 0;
}

.single .entry-title {
    position: relative;
    animation: opacity .75s var(--animation-in) .7s 1 backwards;
    z-index: 2;
    mix-blend-mode: plus-lighter;
    max-width: min(var(--content-size), 100%);
}

.single .entry-title h1 {
    line-height: 1.5;
    margin: 0 0 .5em;
    font-size: 1.5rem;
    font-weight: 400;
    font-family: var(--font-family-slogn);
    text-wrap: balance;
}

.single .site-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transform-origin: top;
    opacity: 0;
    transition: opacity .5s cubic-bezier(.6, .2, .25, 1), transform 1s cubic-bezier(.6, .2, .25, 1);
}

.single .site-header img.loaded {
    opacity: 1;
    transform: none;
}

.nav-fixed .site-header img.loaded {
    transform: scale(1.05);
}

.single .site-header .loading {
    --trfm: scale(1.1);
    position: absolute;
    inset: 0 0 auto;
    margin: auto;
    color: rgb(255 255 255 / 70%);
    height: var(--nav-height);
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-small);
    gap: .5em;
    animation: var(--animation);
    animation-delay: 1.5s;
    transition: .5s;
}

.single .site-header .loading::before {
    content: "";
    border-top: 2px solid;
    border-radius: 50%;
    width: 1em;
    aspect-ratio: 1;
}

.nav-fixed .site-header img ~ .loading,
.single .site-header img.loaded ~ .loading {
    transform: scale(1.1);
    transform-origin: bottom;
    opacity: 0;
    visibility: hidden;
}

.single .site-header img:not(.loaded) ~ .loading::before {
    animation: rotate 2s linear infinite;
}

.single .entry-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    font-size: var(--font-size-small);
    gap: var(--gap-divs);
    z-index: 2;
}

.entry-meta-right, .entry-meta-left {
    display: flex;
    gap: var(--gap-divs);
}

.entry-meta-left {
    flex-wrap: wrap;
}

.entry-meta-right {
    gap: var(--gap-span);
    align-items: stretch;
}

.entry-summary, .entry-meta-left > * {
    --filter: blur(10px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: auto;
    padding: 1.5em;
    border-radius: var(--radius);
    box-shadow: var(--box-shadow);
    background: var(--s-bg, rgb(255 255 255 / 5%));
    animation: var(--animation);
    animation-delay: .7s;
    transition: .5s;
}

.entry-summary:hover, .entry-meta-left > *:hover {
    box-shadow: var(--box-shadow-color);
}

.single .entry-meta-left > * span {
    font-size: 1.2em;
}

.single .entry-meta-left > * span::before {
    font-family: 'iconfont';
    margin: 0 .25em 0 0;
}

.entry-meta-right > *:nth-child(1) {
    animation-delay: .9s;
}

.post-weather span::before {
    content: "\e628";
}

.post-mood span::before {
    content: "\e613";
}

.post-views span::before {
    content: "\e68e";
}

.post-location span::before {
    content: "\e63d";
}

.post-camera span::before {
    content: "\e62f";
}

.words-num span::before {
    content: "\e693";
}

.read_time span::before {
    content: "\e624";
}

.entry-summary {
    max-width: 30em;
    font-size: 1.1em;
}

.entry-summary::before {
    content: '\e644';
    font-family: 'iconfont';
    font-size: 1rem;
    opacity: .5;
    position: absolute;
    inset: -1em auto 0 .5em;
    z-index: 2;
}

.single .url.fn::before {
    content: none;
}

.entry-attachment {
    text-align: center;
}

.single .aside-area {
    display: grid;
    z-index: 2;
    width: min(var(--content-size), 100%);
    gap: var(--gap-area);
    margin: 0 auto;
}

.aside-author {
    display: grid;
    place-content: center;
    grid: auto / 1fr 5rem 1fr;
    gap: 1em;
    min-height: 5rem;
}

.aside-author .text {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em;
    overflow: clip auto;
    padding: var(--gap-divs);
    background: var(--s-bg, #0000) linear-gradient(145deg, rgb(var(--color-rgb) / 5%), rgb(var(--color-sub-rgb) / 5%), rgb(0 0 0 / .025));
    border-radius: var(--radius);
    font-size: var(--font-size-medium);
    word-break: break-all;
    overflow-wrap: anywhere;
}

.aside-author .text::before {
    position: absolute;
    left: -1rem;
    font-family: 'iconfont';
    font-size: 4rem;
    line-height: 0;
    color: rgb(var(--color-sub-rgb) / .1);
    text-shadow: none;
}

.aside-author .des::before {
    content: "\e644";
}

.aside-author .note::before {
    content: "\e6b5";
    right: -1rem;
    left: unset;
}

.aside-author .author-info {
    grid-area: 1 / 1 / 2 / 4;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
    justify-content: space-between;
    gap: 1em;
}

.aside-author .author-info .name {
    display: flex;
    align-items: center;
    letter-spacing: var(--font-spacing);
    font-size: var(--font-size-title);
    font-family: var(--font-family-title);
    font-weight: var(--font-weight-title);
    gap: .5em;
    flex-wrap: wrap;
    color: rgb(var(--color-rgb));
}

.aside-author .author-info .name:before {
    content: "\e615";
    font-family: 'iconfont';
}

.aside-author .author-info .tool {
    display: flex;
    align-items: center;
    gap: 1em;
}

.aside-author .author-info .tool a {
    font-family: 'iconfont';
    font-size: var(--icon-size);
    line-height: var(--icon-size);
    color: rgb(var(--color-sub-rgb));
    cursor: pointer;
}

.aside-author .author-avatar {
    grid-area: 2 / 2 / 3 / 3;
    place-self: center;
    z-index: 2;
}

.aside-author .avatar {
    --scale: 1;
    --shrink: calc((var(--img-size) / var(--scale) - var(--img-size)) / 2 - var(--border-size));
    --img-size: 5.5rem;
    --border-size: 5px;
    --border-color: rgb(var(--color-rgb) / .05);
    --bg-set: content-box no-repeat center / calc(100% / var(--scale));
    height: var(--img-size);
    width: var(--img-size);
    object-fit: contain;
    object-position: top;
    padding-top: 1.1rem;
    margin: -.55rem 0 0 0;
    border-radius: 0 0 50% 50%;
    background: radial-gradient(circle closest-side, rgb(var(--color-sub-rgb) / .2) calc(99% - var(--border-size)), var(--border-color) calc(100% - var(--border-size)), var(--border-color) 99%, #0000 100%) var(--bg-set);
    transform: scale(var(--scale));
    -webkit-mask: linear-gradient(#000 0 0) no-repeat center calc(0px - var(--shrink)) / calc(100% / var(--scale) - 2 * var(--border-size)) 50%,
    radial-gradient(circle closest-side, #000 99%, #0000 100%) var(--bg-set);
    transition: .5s;
}

.aside-author:hover .avatar {
    --scale: 1.2;
}

.aside-author .des {
    grid-area: 2 / 1 / 3 / 2;
}

.aside-author .share-content {
    position: absolute;
    width: min(15rem, 100%);
    top: 1.5rem;
    right: 0;
    padding: var(--gap-divs);
    background: var(--w-bg);
    box-shadow: var(--box-shadow-white);
    border-radius: var(--radius);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .3s;
}

.aside-author .share-content.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.aside-author #copy-content {
    font-size: var(--font-size-small);
    opacity: .5;
}

.aside-author .note {
    grid-area: 2 / 3 / 3 / 4;
}

.table-of-content {
    --width: max(calc(50vw - var(--edge-lr) - var(--content-size) / 2), calc(50vw - var(--edge-lr) - (100vw - var(--edge-lr)) * 0.35));
    position: sticky;
    display: flex;
    flex-direction: column;
    justify-content: center;
    top: calc(var(--nav-height) + var(--gap-divs));
    font-size: .6rem;
    width: calc(var(--width) - var(--gap-area));
    height: calc(100vh - var(--nav-height) - var(--gap-divs) * 3);
    margin: 0 calc(var(--width) * -1) 0 0;
    float: right;
    z-index: 3;
    opacity: .2;
    line-height: 2;
    gap: .5em;
    transition: .5s;
}

.table-of-content:hover {
    opacity: 1;
}

.table-of-content h6::before {
    font-family: iconfont;
    content: "\e652" !important;
    margin: 0 .5em 0 0;
    font-weight: 400;
}

.table-of-content ul {
    line-height: 2.5;
    list-style: none;
    margin: -1rem 0;
    max-height: 100%;
    font-size: var(--font-size-medium);
    counter-reset: section;
    padding: 1rem 0;
    overflow: clip scroll;
    overscroll-behavior-y: contain;
    -webkit-mask: linear-gradient(180deg, #00000000, #000) no-repeat 0 0 / 100% 1rem, linear-gradient(180deg, #000, #000) no-repeat center / 100% calc(100% - 2rem), linear-gradient(180deg, #000, #00000000) no-repeat 100% 100% / 100% 1rem;
}

.table-of-content li {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    transform-origin: center left;
    transition: .5s;
}

.table-of-content:hover ul li {
    opacity: .5;
}

.table-of-content:hover ul li:hover {
    opacity: 1;
    scale: 1.1;
}

.single .entry-content p img {
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
    object-fit: cover;
    border-radius: var(--radius);
    transition: .3s;
    animation: opacity 1s;
}

.single .entry-content h5,
.heading-level-5 {
    counter-reset: subsection;
}

.single .entry-content h5::before,
.heading-level-5 a::before {
    font-variant-numeric: tabular-nums;
    counter-increment: section;
    content: "" counter(section) ". ";
}

.heading-level-6 {
    margin: 0 0 0 1.5em;
    font-size: var(--font-size-small);
}

.single .entry-content h6::before,
.heading-level-6 a::before {
    font-variant-numeric: tabular-nums;
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}

/* 文章暗黑通用 */
body:is(.single-format-audio, .single-format-video, .single-format-gallery) .entry-header {
    filter: blur(20px) brightness(.3) !important;
    position: fixed;
    inset: -40px;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    z-index: 0;
}

body:is(.single-format-gallery, .single-format-audio, .single-format-video) .nmsingle-container:hover,
body:is(.single-format-gallery, .single-format-audio, .single-format-video) .comment-list .depth-1:hover {
    background: rgb(255 255 255 / .1);
}

/* 文章自定义类型 */
body:is(.single-format-quote, .single-format-image) .site-header {
    height: 100vh;
}

.single-format-gallery .site-header {
    height: auto;
    --top: max(20rem, 40vh);
}

.single-format-gallery .entry-content {
    width: 100%;
}

.single-format-gallery .maps-area {
    position: fixed;
    visibility: visible;
    display: block !important;
    top: 0;
    right: -20%;
    -webkit-mask: linear-gradient(90deg, #0000 0%, #000) no-repeat 0 0 / 100%;
    z-index: 1;
    transition: filter 1s;
    animation: var(--animation);
    animation-delay: 2s;
}

.single-format-gallery.nav-fixed .maps-area {
    filter: blur(10px);
}

.single-format-gallery figure.wp-block-gallery {
    --caption-size: 100%;
    justify-content: center;
}

/* 一篇文章 */
.category .post_box.word .thumbnail_box {
    position: absolute;
    height: 100%;
}

.category .post_box.word .entry-thyuupost {
    --font-color: 0deg 0% 100%;
    --font-alpha: .9;
    justify-content: flex-end;
    background: linear-gradient(0deg, #000000, #0000);
}

.category .post_box.word .thumbnail::after {
    display: none;
}

/*  一句话 */
.category .post_box.say .entry-preview:hover .thumbnail::after {
    border: none;
    color: #0000;
    text-shadow: none;
}

.category .post_box.say .entry-thyuupost::before {
    content: "\e65d";
    font-family: 'iconfont';
    font-size: 1rem;
    line-height: 1;
    color: hsl(var(--font-color) / .2);
}

.category .post_box.say .thumbnail_box {
    position: absolute;
    height: 100%;
    opacity: 0;
    transition: .5s;
}

.category .post_box.say .entry-preview:hover .thumbnail_box {
    opacity: 1;
}

.category .post_box.say .post_content,
.category .post_box.say .post-categories {
    display: none;
}

.category .post_box.say .entry-preview:hover {
    --font-color: 0deg 0% 100%;
    --font-alpha: .9;
    --color-rgb: 255 255 255;
    --color-sub-rgb: 255 255 255;
}

/* 一个相册 */
.category .post_box.photo .entry-preview {
    --font-color: 0deg 0% 100%;
    --font-alpha: .9;
    justify-content: flex-end;
    text-shadow: 0 1px 5px rgb(0 0 0 / 30%);
}

.category .post_box.photo .thumbnail {
    transition: .5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.category .post_box.photo .thumbnail_box {
    position: absolute;
    height: 100%;
    pointer-events: none;
}

.category .post_box.photo .entry-preview:hover .thumbnail {
    scale: 1.02;
}

.category .post_box.photo .thumbnail img {
    pointer-events: auto;
    filter: brightness(.8);
}

.category .post_box.photo .entry-preview:hover img {
    transform: matrix(1.04, 0, 0, 1.04, 0, 0);
}

.category .post_box.photo .thumbnail::after {
    display: none;
}

.category .post_box.photo .entry-thyuupost {
    flex: 0;
    opacity: 0;
}

.category .post_box.photo .entry-preview:hover .entry-thyuupost {
    opacity: 1;
}

/* =Navigation
----------------------------------------------- */
.navigation-comment,
.page-navigation {
    display: flex;
    justify-content: center;
    gap: var(--gap-divs);
}

.navigation a::after,
.navigation a::before {
    line-height: 1;
    font-weight: 400;
    font-family: "iconfont";
}

.navigation a[rel="prev"]:after,
.nav-previous a::before {
    content: "\e623";
}

.navigation a[rel="next"]:after,
.nav-next a::after {
    content: "\e627";
}

.navigation .meta-nav {
    opacity: 0;
    margin: 0 -3.5em 0 0;
    font-size: var(--font-size-small);
    transition: .5s;
}

.navigation .nav-next .meta-nav {
    margin: 0 0 0 -3.5em;
}

.nav-previous:hover .meta-nav,
.nav-next:hover .meta-nav {
    opacity: 1;
    margin: 0;
}

.post-navigation {
    animation: var(--animation);
    animation-delay: .7s;
    display: grid;
    gap: var(--gap-span);
    grid: auto / 1fr;
    z-index: 2;
}

.post-navigation a {
    display: flex;
    align-items: center;
    padding: .5rem;
    background: rgb(255 255 255 / 5%);
    box-shadow: var(--box-shadow);
    border-radius: var(--radius);
}

.post-navigation a::after {
    font-size: .75rem;
    opacity: .6;
}

.aside-navigation {
    grid-area: 3 / 1 / 4 / 4;
    display: grid;
    gap: 1em;
    grid: auto / repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}

.aside-navigation a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-small);
    line-height: 1;
    position: relative;
    background: var(--s-bg, rgba(0, 0, 0, .025));
    box-shadow: var(--s-box-shadow);
    border-radius: var(--radius);
    padding: 1rem;
}

.aside-navigation a span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.aside-navigation a::after {
    opacity: .1;
    margin: 0 -.5rem 0 .5rem;
}

.aside-navigation a:hover,
.post-navigation a:hover {
    color: white;
    background: rgb(var(--color-sub-rgb) / 80%) !important;
    box-shadow: var(--box-shadow-color);
}

/* =Comments
----------------------------------------------- */
.comment-list {
    --avatar-size: 1.75rem;
    --avatar-gap: calc(var(--avatar-size) + .5rem);
    margin: 0;
    display: grid;
    gap: var(--gap-divs);
}

.entry-content .comment-list {
    margin: var(--gap-divs) 0;
    font-size: var(--font-size-normal);
}

.comment-respond {
    position: relative;
    max-width: var(--content-size);
    padding: 0;
    display: none;
    margin: var(--gap-divs) 0;
}

.fancybox__content.comment-respond {
    display: block !important;
}

.fancybox__content.comment-respond #cancel-comment-reply-link {
    display: none;
}

.comments-area {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-divs);
}

.comments-title-top {
    display: flex;
    justify-content: space-between;
    height: 1rem;
}

.comments-title,
.comment-reply-title,
.comment-form-button {
    font-size: var(--font-size-title);
    font-family: var(--font-family-title);
    font-weight: var(--font-weight-title);
    color: var(--color);
    white-space: nowrap;
}

.comment-form-button {
    color: var(--color-sub);
}

.comments-title::before,
.comment-reply-title::before,
.comment-form-button::after {
    content: '\e8b4';
    font-family: 'iconfont';
    line-height: 1;
    margin: 0 .5em 0 0;
}

.comments-title::before {
    content: '\e633';
}

.comment-form-button::after {
    content: '\e8b4';
    margin: 0 0 0 .5em;
}

.comment-reply-title small a {
    font-size: .6rem;
    color: #999;
    float: right;
}

.comment-list .depth-1 {
    position: relative;
    padding: 1rem;
    border-radius: var(--radius);
    background: var(--s-bg, rgb(0 0 0 / .025));
    box-shadow: var(--s-box-shadow);
    break-inside: avoid;
    transition: .5s;
}

.comment-list .depth-1:hover {
    box-shadow: var(--box-shadow-white);
    background: var(--w-bg);
}

.comment-list .depth-1::after {
    font-family: 'comment-num', serif;
    content: "ID." attr(num);
    position: absolute;
    right: 40px;
    top: 12px;
    font-size: var(--font-size-small);
    line-height: 1;
    padding: .5em 1em;
    /*background: hsl(var(--font-color) / .03);*/
    /*color: hsl(var(--font-color) / .3);*/
    border-radius: 0 1em;
}

.comment-list .depth-1[rating="1"]::after {
    content: "ID." attr(num) "-走心评论";
    /*background: rgb(var(--color-sub-rgb) / .1);*/
    color: rgb(var(--color-sub-rgb) / .6);
}

.comment-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1em;
}

.comment-list ul .comment-body {
    gap: 0 1em;
}

.comment-content {
    flex: 0 0 100%;
    position: relative;
    display: inline-block;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.comment-list ul .comment-content {
    padding: 0 0 0 calc(var(--gap-span) + var(--avatar-size));
}

.comment-content p {
    margin: 0 0 1em;
}

.comment-content p:last-of-type {
    display: inline;
    margin-right: 1em;
}

.comment-list .depth-1 > .comment-body ~ ul.children-0 {
    border-top: 1px dashed hsl(var(--font-color) / .1);
    margin: 1rem 0 0 0;
    font-size: var(--font-size-medium);
}

.comment-list ul {
    margin: 0;
}

.comment-list ul li {
    --avatar-size: 2em;
    margin: 1rem 0 0;
}

.comment-metadata {
    font-size: var(--font-size-small);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: var(--avatar-size);
    border-radius: var(--avatar-size);
    opacity: 0;
    z-index: 1;
    white-space: nowrap;
    padding: 0 var(--gap-divs) 0 calc(var(--avatar-size) + var(--gap-span));
    left: 0;
    top: 0;
    visibility: hidden;
    background: linear-gradient(135deg, var(--color), var(--color-sub));
    box-shadow: 0 0 1rem 0 rgb(var(--color-rgb) / 20%), 0 0.5rem 1rem -0.5rem rgb(var(--color-rgb) / 50%);
    --font-color: 0deg 0% 100%;
    transform: perspective(var(--avatar-size)) rotateY(20deg);
    transform-origin: left center;
    transition: .3s;
}

.comment-author .user-avatar:hover ~ .comment-metadata {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.comment-author .grade-card::after {
    content: attr(title);
}


.comment-author {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: var(--gap-span);
    line-height: 1.5;
}

.comment-author .avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    background: var(--w-bg);
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    z-index: 2;
    overflow: hidden;
    cursor: alias;
}

.user-avatar {
    position: relative;
    width: var(--avatar-size);
    height: var(--avatar-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar::before {
    content: " ";
    position: absolute;
    width: 120%;
    height: 120%;
    background: url(@/assets/user-grade/lv1.png) center / cover;
    opacity: .7;
    pointer-events: none;
    z-index: 2;
    animation: rotate 15s linear infinite paused;
}

.comment-time {
    --font-alpha: .3;
    font-size: var(--font-size-small);
}

.reply {
    --font-alpha: .3;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1em;
    font-family: 'iconfont';
    text-shadow: 1px 0 10px rgba(0, 0, 0, .1);
    line-height: 1;
}

.reply a {
    background: none !important;
}

.comment-reply-link::before {
    content: "\e8b4";
}

.comment-edit-link::before {
    content: "\e629";
}

.comment-content .fn,
.comment-author .fn {
    text-transform: capitalize;
    margin: 0 .5em 0 0;
}

.comment-author .fn {
    letter-spacing: var(--font-spacing);
    font-weight: var(--font-weight-title);
}

.comment-notes,
.form-captcha label,
[class*="comment-form-"] label {
    font-size: var(--font-size-small);
    color: #999;
    margin: 0;
    height: 1rem;
    display: block;
}

.comment-form {
    display: grid;
    gap: 1em;
    margin: .5rem 0 0;
    grid:
		"comment comment comment"
		"author email url"
		"captcha captcha captcha"
		"emoji submit submit" / 1fr 1fr 1fr;
}

.comment-form :where(p) {
    margin: 0;
}

.comment-form-comment {
    grid-area: comment;
}

.comment-form-comment textarea {
    height: calc(100% - 1rem);
}

.comment-form-author {
    grid-area: author;
}

.comment-form-email {
    grid-area: email;
}

.comment-form-url {
    grid-area: url;
}

.comment-form .form-submit {
    grid-area: submit;
    justify-self: end;
}

.form-captcha {
    grid-area: captcha;
    display: grid;
    column-gap: var(--gap-span);
    grid:
        "captcha captcha"
        "img input" / 1fr 2fr;
}
.form-captcha img {
    height: 3em;
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid #eee;
    grid-area: img;
    cursor: pointer;
}
.form-captcha label[for="captcha"] {
    grid-area: captcha;
}
.comment-form .form-submit {
    grid-area: submit;
    justify-self: end;
}

.emoji-btn {
    grid-area: emoji;
    place-self: center left;
    font-size: 1rem;
    width: 2em;
    min-width: 2em;
    height: 2em;
}

.emoji-icons {
    position: absolute;
    display: grid;
    place-items: center;
    grid: auto / repeat(auto-fill, minmax(1em, 1fr));
    width: calc(100% - 6rem);
    height: 2rem;
    right: 4rem;
    bottom: 0;
    font-size: 1rem;
    line-height: 1;
    gap: 1em;
    padding: .5em;
    z-index: 99;
    overflow: hidden auto;
    overscroll-behavior-y: contain;
    transition: .3s, pointer-events 0s;
    scroll-snap-type: y mandatory;
    scrollbar-color: #ffb02e #0000;
}

.emoji-icons.show {
    opacity: 1;
    filter: none;
    width: 100%;
    height: calc(100% - 4.5rem);
    right: 0;
    bottom: 2.6rem;
    background: var(--h-bg);
    background: var(--s-bg, rgb(255 255 255 / .5));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--box-shadow);
    border-radius: var(--radius);
    scroll-snap-type: none;
}

.emoji-icon {
    scroll-snap-align: center;
    user-select: none;
    cursor: pointer;
    content-visibility: auto;
    transition: .3s;
}

.emoji-icon:hover {
    scale: 1.2;
}

.emoji-icon:hover:active {
    scale: 1.1;
}

/* = Nav
==========================================*/
.nav-bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: -1;
    background: var(--s-bg, rgb(250 250 250 / 90%));
    box-shadow: var(--box-shadow-white);
    border: var(--border);
    border-width: 0 0 1px;
    border-radius: 0 0 var(--radius) var(--radius);
    transition: .5s;
}

.nav-fixed .nav-bg {
    opacity: 1;
    transition: .5s;
}

.site-logo {
    z-index: 30;
    opacity: 1;
    transition: .5s;
}

.site-menu {
    margin: 0 auto 0 0;
    transition: .5s;
}

.header-area .iconfont.menu-open {
    display: none;
}

.site-icon {
    display: flex;
    align-items: center;
    gap: var(--gap-divs);
}

.header-area .iconfont {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--icon-size);
    line-height: var(--icon-size);
    cursor: pointer;
    background: none !important;
}

.header-area .iconfont::after,
.header-area .iconfont::before {
    vertical-align: middle;
    z-index: 2;
}

.header-area .iconfont.out {
    color: var(--s-color);
    text-shadow: var(--s-shadow);
}

.header-area .iconfont.icon-night:hover {
    color: wheat;
}

.header-area .site-icon .tips::after {
    --height: 1rem;
    content: attr(title);
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--f-color);
    background: var(--s-color);
    box-shadow: var(--s-shadow);
    border-radius: var(--radius);
    width: fit-content;
    height: var(--height);
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    white-space: nowrap;
    margin: auto;
    padding: 0 4em;
    top: calc((var(--nav-height) - var(--height)) / 2);
    right: 0;
    left: 0;
    line-height: 0;
    opacity: 0;
    z-index: 1;
    visibility: hidden;
    transform: scaleX(1.1);
    pointer-events: none;
    transition: .5s;
}

.header-area .site-icon .tips:hover::after {
    opacity: 1;
    transform: none;
    visibility: visible;
}

#menu-toggle + label:hover,
.menu-out li > a:hover,
.header-area .iconfont.out:hover {
    color: var(--color);
    --s-shadow: none;
}

#menu-toggle + label:hover {
    --s-color: var(--color);
}

.go-top {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--s-color);
    box-shadow: var(--s-shadow);
    text-shadow: none;
    color: var(--f-color, white);
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    width: var(--icon-size);
    height: var(--icon-size);
    line-height: var(--icon-size);
    margin-left: calc((var(--icon-size) + var(--gap-divs)) * -1);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-small);
    visibility: hidden;
    opacity: 0;
    z-index: 30;
    transition: .5s, color 0s;
}

.nav-fixed .go-top {
    margin: 0;
    opacity: 1;
    visibility: visible;
}

.go-top:hover {
    transform: scale(1.2);
    background: var(--color);
}

.go-top:hover .percent,
.go-top .none {
    opacity: 0;
}

.go-top i {
    position: absolute;
    transform: scale(.9);
    transition: .5s;
}

.go-top .btn {
    font-size: inherit;
    transform: rotate(270deg);
}

.go-top .btn::before {
    content: "\e627";
    font-size: 0.75rem;
}

.go-top:hover .btn {
    opacity: 1;
}

/* =Widgets
----------------------------------------------- */
#menu-toggle + label {
    position: relative;
    right: 0;
    top: 0;
    bottom: 0;
    height: var(--icon-size);
    width: var(--icon-size);
    z-index: 31;
    cursor: pointer;
    transition: 1s;
    margin: auto 0;
}

#menu-toggle + label i {
    position: absolute;
    width: 100%;
    height: calc(var(--icon-size) / 5);
    border-radius: calc(var(--icon-size) / 5);
    background: var(--s-color);
    box-shadow: var(--s-shadow);
    inset: 0;
    margin: auto;
    transition: .5s var(--animation-on);
}

#menu-toggle:checked + label {
    scale: 1.1;
    --s-shadow: none;
    --s-color: hsl(var(--font-color) / var(--font-alpha));
}

#menu-toggle:checked + label i.left {
    width: 100% !important;
    transform: rotate(-45deg) !important;
}

#menu-toggle:checked + label i.right {
    width: 100% !important;
    transform: rotate(45deg) !important;
}

#menu-toggle:checked + label i.center {
    opacity: 0;
}

#menu-toggle + label.nav i.left {
    transform: translateY(calc(var(--icon-size) / -3));
}

#menu-toggle + label.nav i.right {
    left: auto;
    transform: translateY(calc(var(--icon-size) / 3));
}

#menu-toggle + label.nav.nav i.center {
    left: auto;
}

#menu-toggle + label.nav:hover i.right {
    width: 90%;
}

#menu-toggle + label.nav:hover i.center {
    width: 80%;
    background: var(--color-sub);
}

#menu-toggle + label.widget i {
    right: auto;
    width: calc(var(--icon-size) / 3);
    height: calc(var(--icon-size) / 3);
    transform: translateY(calc(var(--icon-size) / 4));
}

#menu-toggle + label.widget i.left {
    width: 100%;
    transform: translateY(calc(var(--icon-size) / -4));
}

#menu-toggle + label.widget i.right {
    left: auto;
    right: 0;
    width: calc(var(--icon-size) / 2);
}

#menu-toggle + label.widget:hover i.left {
    width: calc(var(--icon-size) / 2.5);
    background: var(--color-sub);
}

#menu-toggle + label.widget:hover i.right {
    width: calc(var(--icon-size) / 2.5);
    background: var(--color);
    height: calc(var(--icon-size) / 1.15);
    transform: none;
}

#menu-toggle + label.widget:hover i.center {
    width: calc(var(--icon-size) / 2.5);
}

#menu-toggle:checked + label:is(.widget, .widget:hover) i {
    height: calc(var(--icon-size) / 4.5);
}

.menu-widgets {
    position: fixed;
    border-radius: var(--radius);
    background: var(--s-bg, hsl(0 0% 100% / .8));
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
    box-shadow: var(--box-shadow-white);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: top;
    transition: .5s cubic-bezier(.6, .1, 0, 1), pointer-events 0s;
}
.menu-widgets-header{
    display: flex;
    flex-wrap: wrap;
}
.dialog-area.menu-widgets{
    --bg: var(--s-bg, hsl(0deg 0% 100% / 70%));
    display: grid;
    inset: var(--edge-tb) var(--edge-lr) var(--gap-divs);
    padding: 0.5rem;
    background-image: radial-gradient(circle at 25% 65%, hsl(var(--main-color) / .2), #0000 25%), radial-gradient(circle at 75% 35%, hsl(var(--subs-color) / .2), #0000 25%);
    grid: auto 1fr auto  / auto;
    overflow: hidden;
}
.menu-widgets .icon-area {
    position: relative;
    display: flex;
    z-index: 3;
    padding-left: var(--gap-divs);
}

#menu-toggle:checked ~ .menu-widgets .icon-area .iconfont {
    --trfm: translateY(1rem);
    animation: var(--animation);
    animation-duration: .5s;
}

.menu-widgets .user-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--gap-span);
    z-index: 2;
}
.menu-widgets:checked ~ .dialog-area .side-circle {
    scale: 1;
}

/*#theme-toggle {*/
/*    font-size: 20vmax;*/
/*    height: 1em;*/
/*    width: 1em;*/
/*    padding: 0;*/
/*    border-radius: 50%;*/
/*    background: radial-gradient(circle, hsl(35deg 100% 95% / 70%) 50%, #0000 70%);*/
/*    position: fixed;*/
/*    top: -.2em;*/
/*    left: -.2em;*/
/*    cursor: pointer;*/
/*    scale: 10;*/
/*    transition: 1.5s;*/
/*}*/
/*.dialog-check.is-widget:checked ~ .dialog-area.is-widget #theme-toggle {*/
/*    scale: 1;*/
/*}*/
.side-circle {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 90vmax;
    color: hsl(var(--font-color) / .1);
    width: 1em;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px dashed;
    outline: 2px dashed;
    outline-offset: .5em;
    top: -.5em;
    left: -.5em;
    transition: 1s;
}
.dialog-check.is-widget:checked ~ .dialog-area.is-widget .side-circle {
    scale: 1;
}
.side-circle::before {
    content: "";
    width: .5em;
    aspect-ratio: inherit;
    border-radius: inherit;
    border: inherit;
    outline: inherit;
    outline-offset: .5em;
}
.toggle-btn {
    display: inline-flex;
    align-items: center;
    text-align: center;
    line-height: 2;
    padding: .25em;
    border-radius: 2em;
    border: thin solid hsl(var(--font-color) / .1);
    cursor: pointer;
    user-select: none;
    transition: .3s;
}
.toggle-btn i {
    flex: auto;
    color: hsl(var(--font-color) / .6);
    padding: .25em .5em;
    border-radius: inherit;
    transition: .3s;
}
.toggle-btn.is-sidebar {
    order: 3;
    flex-wrap: wrap;
    justify-content: center;
    width: fit-content;
    font-size: var(--font-size-small);
    gap: .5em;
    padding: .5em;
    margin: auto;
    opacity: 0;
    scale: 1.1;
    transform-origin: top;
    transition-delay: 1s;
}
.dialog-check.is-widget:checked ~ .dialog-area.is-widget .toggle-btn.is-sidebar{
    opacity: 1;
    scale: 1;
}
.toggle-btn.is-sidebar .welcome-tip {
    font-size: var(--font-size-medium);
    margin: 0 .5em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
}
.menu-widgets .user-card {
    --avatar-size: 3rem;
    display: flex;
    align-items: center;
    gap: 0 1em;
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: var(--font-weight-title);
}

.menu-widgets .user-card .mail {
    font-size: .75em;
    font-weight: normal;
}

.menu-widgets .user-avatar {
    --border-size: .1em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size);
    font-size: calc(var(--avatar-size) / 1.5);
    aspect-ratio: 1;
    line-height: 1;
    transform: scale(1.2) rotate(5deg);
    transition: .5s;
}

#menu-toggle:checked ~ .menu-widgets .user-avatar {
    transform: none;
}

.menu-widgets .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    background: var(--w-bg);
    border-radius: 50%;
    filter: drop-shadow(0 0 1px rgb(0 0 0 / 20%));
}

.menu-widgets .user-card .user-avatar::after {
    font-size: calc(var(--avatar-size) / 6);
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    -webkit-backdrop-filter: saturate(1.8) blur(20px) brightness(.8);
    backdrop-filter: saturate(1.8) blur(20px) brightness(.8);
    color: white;
    opacity: 0;
    transition: .3s;
}

.menu-widgets .user-card.admin .user-avatar::after {
    content: "管理站点";
}

.menu-widgets .user-card.guest .user-avatar::after {
    content: "登录站点";
}

.menu-widgets .user-card.guest .login.user-avatar::after {
    content: "退出站点";
}

.menu-widgets .user-card .user-avatar:hover::after {
    opacity: 1;
}

.menu-widgets .user-tools {
    display: flex;
    flex-flow: row nowrap;
    width: min(15rem, 100%);
    background-color: var(--s-bg, rgb(255 255 255 / .7));
    box-shadow: var(--box-shadow-white);
    border-radius: var(--radius);
    overflow: auto;
}

.menu-widgets .user-tools .site-icon {
    padding: 0 1.5em;
    gap: 1.5em;
    transition: .3s;
}

.user-btn.active:before {
    content: "\e8b4";
}

.menu-area-content {
    overflow: auto;
    display: grid;
    grid:
		"widget-area widget-area"
		"site-des widget-out";
    gap: var(--gap-divs);
    align-items: center;
    height: 100%;
    padding: var(--gap-divs) 0;
    overscroll-behavior-y: contain;
    transform: translateY(1rem);
    transition: .5s;
}

#menu-toggle:checked ~ .menu-widgets .menu-area-content,
#menu-toggle:checked ~ .menu-widgets {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.widget-area {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    grid-area: widget-area;
}

.user-sub .widget {
    position: relative;
    border-radius: var(--radius);
    background: var(--bg);
    flex: min(var(--card-size), 100%);
    padding: 1.5em;
    overflow-wrap: anywhere;
    overflow: hidden;
}

#menu-toggle:checked ~ .menu-widgets .user-sub .widget {
    --trfm: translateY(1rem);
    --filter: blur(10px);
    animation: var(--animation);
    animation-duration: .7s;
}

.widget-out {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap-divs);
    grid-area: widget-out;
}

.widget-out h2 {
    display: none;
}

.widget-out .widget {
    flex: 6rem;
    position: relative;
    cursor: pointer;
}

.widget-area :is(ul, ol) {
    margin: 0;
}

.widget-area time {
    font-size: var(--font-size-small);
    flex: none;
    order: 3;
    position: relative;
}

.widget-area time::after {
    content: "";
    width: 6px;
    height: 200%;
    background: linear-gradient(180deg, #0000, rgb(var(--color-rgb) / 20%), #0000) no-repeat center / 2px 100%,
    radial-gradient(circle, rgb(var(--color-rgb) / 70%) 50%, #0000 50%) no-repeat center / 6px 6px;
    position: absolute;
    top: 0;
    right: calc(-.8rem - 3px);
    bottom: 0;
    margin: auto;
    transition: .5s;
}

.widget-area li:hover time::after {
    background-size: 2px 0, 12px 6px;
}

.user-sub:not(.active) {
    display: none;
}

.guest-area {
    grid-area: widget-area;
}

.guest-area .comment-area ul {
    display: grid;
    gap: var(--gap-divs);
    margin: 0;
    grid: auto / repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.guest-area .comment-area ul li {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
}

.guest-area .comment-area time {
    position: relative;
    font-size: var(--font-size-small);
}

.guest-area .comment-area time:after {
    content: "";
    width: 6px;
    height: 200%;
    background: linear-gradient(180deg, #0000, rgb(var(--color-rgb) / 20%), #0000) no-repeat center / 2px 100%, radial-gradient(circle, rgb(var(--color-rgb) / 70%) 50%, #0000 50%) no-repeat center / 6px 6px;
    position: absolute;
    top: 0;
    right: calc(-.8rem - 3px);
    bottom: 0;
    margin: auto;
    transition: .5s;
}

.guest-area .comment-area ul li:hover time::after {
    background-size: 2px 0, 12px 6px;
}

.guest-area .comment-area .content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.block-tag-cloud.is-style-outline a {
    font-size: unset !important;
    text-decoration: none !important;
}

.user-avatar {
    position: relative;
    width: var(--avatar-size);
    height: var(--avatar-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar::before {
    content: " ";
    position: absolute;
    width: 120%;
    height: 120%;
    background: url('~/assets/user-grade/lv1.png') center / cover;
    opacity: .7;
    pointer-events: none;
    z-index: 2;
    animation: rotate 15s linear infinite paused;
}

#menu-toggle:checked ~ .menu-widgets .user-avatar::before,
.comment-body:hover .user-avatar::before {
    animation-play-state: running;
}

/* 日历 */
.el-calendar__header .el-calendar__button-group {
    display: none !important;
}

.el-calendar-table .el-calendar-day {
    height: 55px !important;
}

.el-calendar {
    background-color: transparent !important;
}

.widget_calendar th,
.widget_calendar td {
    background: none !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 3;
    text-align: center;
    vertical-align: middle;
    font-size: var(--font-size-small);
    font-variant-numeric: tabular-nums;
}

.widget-area table {
    flex: 100%;
}

.widget-area .wp-block-calendar {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.widget-area td a {
    width: 100%;
    height: 100%;
    color: rgb(var(--color-rgb) / .7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgb(var(--color-rgb) / 70%) 50%, #0000 50%) no-repeat center calc(50% + 1.25em) / .5em .5em !important;
}

.widget-area td a:hover {
    background-size: 12px 6px !important;
}

.widget-area .block-rss__item-excerpt {
    content: "查看 " attr(aria-label) "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: var(--font-size-small);
    z-index: 2;
    opacity: 0;
    line-height: 2;
    display: block;
    font-weight: 400;
    color: rgb(var(--color-rgb) / .7);
    transform: translateY(10px);
    visibility: hidden;
    background: rgb(var(--color-rgb) / .1) !important;
    padding: .05rem .5rem;
    border-radius: .5rem;
    filter: blur(10px);
    -webkit-backdrop-filter: blur(10px) saturate(1.8);
    backdrop-filter: blur(10px) saturate(1.8);
    transition: .5s, pointer-events 0s;
}

.widget-area .wp-block-rss.douban li:hover .block-rss__item-excerpt {
    opacity: 1;
    filter: blur(0);
    visibility: visible;
    transform: translateY(0);
}

.widget-area caption,
.widget-area :is(.widget_tag_cloud, .widget_rss, .widget_recent_entries):before {
    font-family: var(--font-family-title);
    font-weight: var(--font-weight-title);
    letter-spacing: var(--font-spacing);
}

.widget-area caption {
    margin: 0 0 var(--gap-divs);
}


.widget-area :is(.widget_tag_cloud, .widget_rss, .widget_recent_entries, .widget_calendar):after {
    content: "CALENDAR";
    position: absolute;
    right: 1rem;
    top: 1rem;
    opacity: .2;
}

.widget-area .widget_recent_entries::after {
    content: "RECENT";
}

.widget-area .widget_rss::after {
    content: "READ";
}

.widget-area .widget_tag_cloud::after {
    content: "TAG";
}

.widget-area .widget_recent_entries::before {
    content: "最近动态";
}

.widget-area .widget_rss::before {
    content: "阅读动态";
}

.widget-area .widget_tag_cloud::before {
    content: "标签";
}

/* 最近文章 */
.widget-area .block-tag-cloud,
.widget-area .wp-block-rss.douban,
.widget-area .wp-block-latest-posts {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.widget-area .wp-block-rss.douban li,
.widget-area .wp-block-latest-posts li {
    position: relative;
    display: flex;
    flex-flow: row-reverse nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 1.6rem;
}

.widget-area .wp-block-rss.douban li a,
.widget-area .wp-block-latest-posts li a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wp-block-rss__item-title .item-publish-date {
    display: block;
}

.widget-area .block-rss__item-excerpt {
    right: 0;
    left: auto;
    bottom: auto;
    pointer-events: none !important;
}

/* 标签 */
.widget-area .block-tag-cloud {
    height: 100%;
    gap: var(--gap-span);
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    overflow: auto;
    margin: calc(var(--gap-span) * -1) calc(var(--gap-divs) * -1);
    padding: var(--gap-span) var(--gap-divs);
    -webkit-mask: linear-gradient(180deg, #0000, #000) no-repeat 100% 0 / 100% var(--gap-divs),
    linear-gradient(180deg, #000, #000) no-repeat 100% center / 100% calc(100% - var(--gap-divs) * 2),
    linear-gradient(180deg, #000, #0000) no-repeat 100% 100% / 100% var(--gap-divs);
}

.widget-area .block-tag-cloud a {
    border: 0;
    margin: 0;
    padding: 0;
}

/*  widget 特殊优化 */
.widget-area-page .widget:not(.widget_text) li time {
    opacity: .5;
    color: inherit;
}

/* Search widget */
.search-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5em;
    width: min(var(--card-size), 100%);
}
.dialog-area.is-widget .search-form {
    z-index: 2;
    margin: 0 0 0 auto;
}

.search-field {
    border-radius: 2em;
    border: var(--border);
    backdrop-filter: blur(20px) saturate(1.8);
}

.search-form label {
    width: 100%;
}

.search .page-title {
    display: flex;
    align-items: center;
}
/* 屏幕阅读器 */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    left: -1000em;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* =Page
----------------------------------------------- */
.page .entry-content {
    width: 100%;
    font-size: var(--font-size-normal);
}

.page-list li {
    background: var(--w-bg);
    box-shadow: var(--box-shadow-white);
    position: relative;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.page-info {
    background: var(--w-bg);
    box-shadow: 0 10px 30px 0 rgb(0 0 0 / 5%);
    position: relative;
    border-radius: 0 0 250px var(--radius) / 0 0 50px var(--radius);
}

.page-list img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    vertical-align: middle;
}

.page-list h5 {
    margin: 1rem 3rem -1rem 1rem;
}

.page-list p {
    margin: 1rem;
    opacity: .6;
}

.page-list .color-btn {
    --button-size: 2.5rem;
}

.page-list .button-info {
    margin: 1rem 0 0;
    position: absolute;
    right: 1rem;
    bottom: -.5rem;
    display: grid;
    grid-auto-flow: column;
    gap: .5rem;
}

.site-footer .logo::before, .site-footer .logo::after {
    animation: none !important;
}

@media (min-width: 1153px) {
    body.home .site-footer .logo, body.home .comments .comments-btn {
        display: none;
    }
}

/* =PC
----------------------------------------------- */
@media (min-width: 1153px) {
    body.page-template-doc .header-area .site-icon :not(.post-menu) {
        --s-color: hsl(0deg 0% 100% / 75%);
        --f-color: hsl(0deg 0% 0% / 75%);
        --s-shadow: var(--text-shadow);
    }

    body.page-template-doc .nav-bg {
        background: #0000;
    }

    .menu-out .menu::after {
        content: "";
        position: fixed;
        height: 100vh;
        width: 100vw;
        z-index: -1;
        top: 0;
        left: 0;
        visibility: hidden;
        pointer-events: none;
        transition: .3s;
    }

    .menu-out .menu:hover::after {
        background: rgb(0 0 0 / 10%);
        visibility: visible;
        transition: 1s;
    }

    .menu-out .menu li ul > li ul > li ul {
        opacity: 0;
        min-width: 100%;
        max-height: 0;
        pointer-events: none;
        visibility: hidden;
        transform: perspective(2000px) rotateX(-20deg);
        transform-origin: top;
    }

    .menu-out .menu li ul > li ul > li:hover > ul {
        max-height: 100vh;
    }

    .post-menu {
        left: 0;
        right: 0;
        margin: 0 auto;
        transform: translateY(-1rem);
        width: calc(100% - 30rem);
        height: var(--nav-height);
    }

    .nav-fixed .post-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition: .5s;
    }

    .post-menu .site-title {
        font-size: var(--font-size-medium);
        font-family: var(--font-family);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        opacity: .4;
        transition: opacity .3s, transform .3s;
    }

    .site-icon > .tips:hover ~ .post-menu > .site-title,
    .post-menu:hover .site-title {
        transform: scaleX(1.5);
        opacity: 0;
    }

    .icon-mulu::before {
        display: none;
    }

    .page .site-header {
        height: calc(40% - var(--edge-tb));
    }

    .search .header-area {
        z-index: 31;
    }

    .search.nav-fixed .header-area {
        z-index: 30;
    }

    /* widescreen */
    .wide .site-main {
        grid: 1fr / clamp(10rem, 15vw, var(--card-size)) 1fr;
        gap: var(--edge-lr);
        place-items: stretch;
    }

    .wide .page-header {
        --edge: calc(var(--edge-tb) + var(--gap-divs));
        grid-area: 1 / 1 / 2 / 2;
        position: sticky;
        top: var(--edge);
        height: calc(100vh - var(--edge) * 2);
        align-content: center;
    }

    .wide .taxonomy-sub {
        flex-direction: column;
        align-items: flex-start;
        margin: 0;
        -webkit-mask: none;
    }

    .wide .taxonomy-sub li::before {
        content: "";
        width: 6px;
        height: 150%;
        background: linear-gradient(180deg, #0000, rgb(var(--color-rgb) / 20%), #0000) no-repeat center / 2px 100%,
        radial-gradient(circle, rgb(var(--color-rgb) / 70%) 50%, #0000 50%) no-repeat center / 6px 6px;
        position: absolute;
        inset: 0 auto 0 calc(-1rem + 3px);
        margin: auto;
        transition: .5s;
    }

    .wide .taxonomy-sub li.current-cat::before,
    .wide .taxonomy-sub li:hover::before {
        background-size: 2px 0, 12px 6px;
    }

    .wide .post_box {
        grid-area: 1 / 2 / 2 / 3;
    }

    .wide .page-navigation {
        grid-area: 1 / 1 / 2 / 2;
        position: sticky;
        bottom: var(--gap-divs);
        place-self: end start;
        animation: var(--animation-ot);
        animation-delay: 1s;
    }

    .wide .aside-comment {
        grid-area: 2 / 2 / 3 / 3;
    }

    /* 视频样式 */
    .single-format-video .site-header {
        height: calc(100% - var(--edge-tb));
        width: 30%;
        margin: var(--edge-tb) 0 0 0;
        justify-content: center;
    }

    .single-format-video .content-area {
        position: static;
        animation: opacity .75s var(--animation-in) 1 1s backwards;
    }

    .single-format-video .entry-content > *:not(pvideo,.table-of-content) {
        position: relative;
    }

    .single-format-video pvideo:first-of-type {
        width: calc(70% - var(--edge-lr) * 3);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        aspect-ratio: 16 / 9;
        right: var(--edge-lr);
        height: auto;
        padding: 0;
        z-index: 2;
    }

    /* 音频样式 */
    .single-format-audio .site-header {
        margin: calc(var(--edge-tb) * 2) var(--edge-lr) 0;
        height: auto;
    }

    /* 宽屏样式 */
    .single-format-aside .site-main {
        grid: auto / 2fr 1fr;
    }

    .single-format-aside .table-of-content {
        float: none;
        margin: 0;
        position: static;
        width: auto;
        height: auto;
        opacity: 1;
    }

    .single-format-aside .aside-area {
        position: sticky;
        grid: auto 1fr / auto;
        padding: 1rem .5rem 1rem 0;
        margin: -1rem 0 0 .5rem;
        -webkit-mask: linear-gradient(180deg, #00000000, #000) no-repeat 0 0 / 100% 1rem, linear-gradient(180deg, #000, #000) no-repeat center / 100% calc(100% - 2rem), linear-gradient(180deg, #000, #00000000) no-repeat 100% 100% / 100% 1rem;
        top: var(--sticky-top);
        max-height: calc(100vh - var(--sticky-top) - var(--gap-divs));
        overscroll-behavior: contain;
        overflow: overlay;
        scrollbar-color: #0000 #0000;
        transition: .3s;
    }

    .single-format-aside .aside-area:hover {
        scrollbar-color: rgb(var(--color-rgb) / .1) #0000;
    }

    .single-format-aside .aside-author {
        min-height: auto;
    }

    .single-format-aside .comments-title-top {
        position: sticky;
        z-index: 10;
        top: -.5rem;
    }

    .entry-summary span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-align: justify;
        text-overflow: ellipsis;
        overflow: auto;
    }

    .widget-area .block-tag-cloud {
        max-height: 15rem;
    }

    .widget-out {
        justify-self: flex-end;
    }

    .aside-author .note {
        grid-area: 2 / 2 / 3 / 4;
        padding-left: 6rem;
        background: linear-gradient(-90deg, rgb(var(--color-rgb) / 5%), rgb(var(--color-sub-rgb) / 5%), #0000) no-repeat right / calc(100% - 3rem);
    }

    .aside-author .des {
        grid-area: 2 / 1 / 3 / 3;
        padding-right: 6rem;
        background: linear-gradient(90deg, rgb(var(--color-rgb) / 5%), rgb(var(--color-sub-rgb) / 5%), #0000) no-repeat left / calc(100% - 3rem);
    }

    .comment-form {
        grid:
			"comment author"
			"comment email"
			"comment url"
			"comment captcha"
			"emoji submit" / 2fr 1fr;
        gap: 1em 1.5rem;
    }

    .comment-form {
        grid:
			"comment author"
			"comment email"
			"comment url"
			"comment captcha"
			"emoji submit" / 2fr 1fr;
        gap: 1em 1.5rem;
    }

    /* Button */
    body:not(.single):not(.night) .site-logo > a:hover {
        color: #ee4d50;
    }
}

/* =pad及mobile
----------------------------------------------- */
@media (max-width: 1152px) {
    .nav-fixed .post-menu {
        visibility: visible;
        opacity: 1;
        position: relative;
    }

    .taxonomy-nav {
        flex: 100%;
    }

    .taxonomy-sub li {
        background: var(--w-bg);
        box-shadow: var(--box-shadow-white);
        border-radius: var(--radius);
        padding: 1em;
        line-height: 1;
    }

    .site-header {
        height: 50%;
        overflow: visible;
        z-index: 2;
    }

    .single .site-header {
        --top: 40vh;
        position: relative;
        height: auto;
        text-align: left;
        align-items: normal;
    }

    .single .content-area {
        width: 100%;
        animation: none;
    }

    .entry-meta-left {
        flex: 100%;
        flex-wrap: nowrap;
        margin: calc(var(--edge-lr) * -1);
        padding: var(--edge-lr);
        gap: var(--gap-span);
        scroll-snap-type: x mandatory;
        scroll-padding: var(--gap-divs);
        overflow: scroll visible;
    }

    .entry-meta-right {
        flex: 0 0 100%;
    }

    .entry-meta-left > * {
        flex: 1 0 auto;
        align-items: start;
        scroll-snap-align: start;
    }

    .single .entry-summary {
        max-width: 100%;
    }

    .post-menu .site-title,
    .iconfont.quanping,
    .single .entry-meta .navigation {
        display: none;
    }

    .aside-author {
        display: flex;
        flex-direction: column;
    }

    .table-of-content {
        position: static;
        width: 100%;
        margin: 0;
        float: none;
        height: auto;
        opacity: 1;
    }

    .menu-area-content {
        grid:	"widget-area"
				"widget-out"
				"site-des";
        padding-bottom: calc(env(safe-area-inset-bottom) + var(--nav-height));
        -webkit-mask: linear-gradient(180deg, #00000000, #000) no-repeat 0 0 / 100% calc(var(--edge-lr) * 2), linear-gradient(180deg, #000, #000) no-repeat center / 100% calc(100% - var(--edge-lr) * 4), linear-gradient(180deg, #000, #00000000) no-repeat 100% 100% / 100% calc(var(--edge-lr) * 2);
    }

    .menu-widgets .user-card {
        --avatar-size: 1.5rem;
        line-height: 1.5;
        font-size: var(--font-size-small);
    }

    .menu-widgets .user-tools {
        flex: 0 0 100%;
    }

    .menu-area-content .site-des {
        margin: 0 auto;
    }
}

/* =mobile
----------------------------------------------- */
@media (max-width: 641px) {
    .dialog-area.menu-widgets {
        position: fixed;
        display: flex;
        flex-direction: column;
        inset: auto .5rem .5rem;
        width: auto;
        max-width: 100%;
        max-height: 80%;
        margin: auto;
        background: var(--s-bg, hsl(0 0% 100% / .8));
        -webkit-backdrop-filter: blur(10px) saturate(1.8);
        backdrop-filter: blur(10px) saturate(1.8);
        box-shadow: var(--box-shadow);
        border-radius: var(--radius);
        opacity: 0;
        transform: translateY(120%) scaleX(.8);
        transform-origin: top;
        z-index: -1;
        visibility: hidden;
        transition: .5s cubic-bezier(.6, .1, 0, 1);
    }
    .logo::before, .logo::after {
        animation: none;
        background-size: 100%;
    }

    body:not(.nav-fixed) .header-area {
        position: absolute;
    }

    .nav-fixed .header-area {
        inset: auto 0 0;
    }

    .nav-fixed .nav-bg {
        border-width: 1px 0 0;
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .nav-fixed .header-area .site-logo {
        display: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: 0s;
    }

    .nav-fixed .header-area > .site-icon {
        width: 100%;
        justify-content: space-between;
        margin: 0 0 0 calc((var(--icon-size) + var(--gap-divs)) * -1);
    }

    .nav-fixed .menu-widgets .icon-area:after, .nav-fixed .header-area > .site-icon:before {
        content: "";
        width: var(--icon-size);
    }

    .dialog-area.is-widget {
        max-height: calc(100% - var(--nav-height) - .5rem);
        padding-bottom: .25em;
        transform: scale(1.2) rotate(5deg);
        transform-origin: bottom right;
    }

    .menu-widgets .icon-area {
        inset: auto 0 0;
        height: 2.5rem;
        justify-content: space-between;
        background: var(--s-bg, rgb(250 250 250 / 90%));
        border-top: var(--border);
        box-shadow: var(--box-shadow);
        border-radius: var(--radius) var(--radius) 0 0;
        -webkit-backdrop-filter: saturate(1.8) blur(20px);
        backdrop-filter: saturate(1.8) blur(20px);
    }

    .site-branding {
        left: 0;
        right: 0;
        bottom: 0;
    }

    .site-menu {
        margin: 0 0 0 auto;
    }

    .header-area .iconfont.menu-open {
        display: flex;
    }

    #menu-open ~ .menu-open::before {
        position: relative;
        transition: .3s;
    }

    .menu-open::after {
        content: "";
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        background: rgb(0 0 0 / 50%);
        visibility: hidden;
        opacity: 0;
        z-index: 32 !important;
        transition: .5s;
    }

    #menu-open:checked + label::after {
        visibility: visible;
        opacity: 1;
    }

    .menu-out {
        --timing-jump: .75s var(--animation-on);
        position: fixed;
        margin: auto;
        inset: var(--nav-height) 1rem;
        background: var(--s-bg, rgb(255 255 255 / 90%));
        box-shadow: var(--box-shadow);
        border-radius: var(--radius);
        visibility: hidden;
        transform: translateX(100vw) scale(1.1);
        transform-origin: left;
        z-index: 33;
        transition: visibility var(--timing-jump), transform var(--timing-jump);
        -webkit-backdrop-filter: blur(10px) saturate(1.8);
        backdrop-filter: blur(10px) saturate(1.8);
    }

    #menu-open:checked ~ .menu-out {
        opacity: 1;
        transform: none;
        visibility: visible;
        pointer-events: auto;
    }

    .menu-out .menu {
        display: block;
        mask: var(--scroll-mask);
        overflow: auto;
        overscroll-behavior: contain;
    }

    .menu-out .menu li ul {
        all: unset;
    }

    .dialog-area{
        position: fixed;
        display: flex;
        flex-flow: column;
        inset: auto .5rem .5rem;
        width: auto;
        max-width: 100%;
        max-height: calc(100% - var(--nav-height) - .5rem);
        outline: var(--border);
        border-radius: var(--radius);
        background: var(--s-bg, hsl(0 0% 100% / .85));
        backdrop-filter: blur(10px) saturate(1.8);
        box-shadow: var(--box-shadow);
        transform: scaleX(.95) translateY(100%);
        opacity: 0;
        visibility: hidden;
        transition: .5s cubic-bezier(.6, .1, 0, 1);
    }

    .menu-out .menu li ul > li ul {
        display: grid;
        grid: auto / repeat(auto-fill, minmax(min(5rem, 100%), 1fr));
        justify-items: start;
        margin: 0;
        gap: 0;
    }

    .menu-out .menu > li > ul a::after {
        width: auto;
        opacity: .2;
        font-size: var(--font-size-small);
        text-transform: uppercase;
    }

    :where(.menu-out .menu) > li > a {
        color: inherit;
        margin: -.5rem .5rem;
        border-top: var(--border);
        opacity: 1;
        line-height: 4;
    }

    .widget-area table {
        height: auto;
        line-height: 2.5;
    }

    .single .site-header .loading {
        inset: calc(var(--top) - var(--nav-height)) auto auto var(--edge-lr);
    }

    .emoji-icons {
        width: calc(100% - 5.5rem);
        column-gap: .5em;
        filter: none;
    }

    .comment-awaiting-moderation {
        margin: 0 0 .5rem 50px;
    }
    .comment-time{
        display: none;
    }
}

/* 通用动画 */
@keyframes rotate {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(359deg)
    }
}

@keyframes opacity {
    0% {
        opacity: var(--opci, 0);
    }
    100% {
        opacity: var(--opci-in, 1);
    }
}

@keyframes transform {
    0% {
        transform: var(--trfm, translateY(1rem));
        transform-origin: var(--trfm-or, top);
    }
    100% {
        transform: var(--trfm-in, none);
    }
}

@keyframes filter {
    0% {
        filter: var(--filter, none);
    }
    100% {
        filter: none;
    }
}

@keyframes end {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* =外部插件优化
----------------------------------------------- */
/* fancybox */
.fancybox__content.entry-content {
    padding: 0 var(--edge-lr);
    width: min(60rem, 100%);
}

.fancybox__content.comment-respond {
    margin: var(--edge-lr);
    width: calc(100% - var(--edge-lr) * 2);
}

.fancybox__container {
    --fancybox-opacity: .98;
    --fancybox-bg: var(--h-bg);
    --fancybox-color: hsl(var(--font-color) / var(--font-alpha));
    --fancybox-content-color: hsl(var(--font-color) / var(--font-alpha));
    --fancybox-content-bg: none;
}

.fancybox__toolbar {
    font-family: var(--font-family);
    --fancybox-toolbar-text-shadow: none;
    --f-button-width: 1.5rem;
    --f-button-height: 1.5rem;
    --f-button-bg: none;
    --f-button-svg-filter: none;
    --f-button-hover-bg: var(--color);
}

.fancybox__infobar {
    font-size: .5rem;
    padding: 0;
}

.fancybox__nav {
    --f-button-svg-filter: none;
    --f-button-hover-bg: var(--color-sub);
}

.fancybox__footer {
    background: var(--w-bg) !important;
    box-shadow: var(--box-shadow-white);
    border-radius: var(--radius) var(--radius) 0 0;
    text-align: center;
}

.f-carousel.wp-block-gallery {
    --f-button-width: 1.25rem;
    --f-button-height: 1.25rem;
    --f-button-svg-width: 50%;
    --f-button-border-radius: 50%;
    --f-carousel-theme-color: hsl(var(--font-color) / 50%);
    --f-button-bg: var(--bg);
    --f-carousel-dots-height: 1rem;
}

.f-carousel.wp-block-gallery:not(.is-cropped) {
    --wp--style--unstable-gallery-gap: 0;
}

.f-carousel.wp-block-gallery .wp-block-image {
    margin: 0 1rem 0 0 !important;
}

.f-carousel.wp-block-gallery .f-carousel__nav {
    order: 3;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: .5rem;
}

.f-carousel.wp-block-gallery .f-carousel__dots,
.f-carousel.wp-block-gallery .f-carousel__nav .f-button {
    position: static;
    transform: none;
    margin: 0 !important;
}

.f-carousel.wp-block-gallery .f-carousel__viewport {
    border-radius: var(--radius);
}
